import React, { type CSSProperties, useEffect, useRef } from "react";
import { styled } from "@umijs/max";
import { type IFlowView } from "./useFlowView";
import './index.less';

const Box = styled.div`
    width: 100%;
    height: 100%;
    .canvas{
        background: #fff;
        width: 100%;
        height: 100%;
    }
`;

/** 示例组件，需要按钮请自行建立组件 */
const FlowView = ({ xml, initView, style, className, setProcessStatus, processNodeInfo }: IFlowView & { style?: CSSProperties, className?: string, processNodeInfo?: any }) => {
  const el = useRef<HTMLDivElement | null>(null);
  const init = async () => {
    if (el.current && xml) {
      await initView({
        el: el.current,
        xml
      });
      if (processNodeInfo) {
        setProcessStatus(processNodeInfo);
      }
    }
  };
  useEffect(() => {
    init();
  }, [xml, el, processNodeInfo]);

  return <Box className={className} style={style}>
    <div className="canvas" ref={el} />
  </Box>;
};

export default FlowView;